<template>
    <div>
        <el-card class="mb-10">
             <CategorySelector :disabled="showStatus != SPUSTATUS.SPULIST"></CategorySelector>
        </el-card>
        <el-card>
            
            <SpuList v-if="showStatus == SPUSTATUS.SPULIST" v-model="showStatus" @spuInfo="changeSpuInfo"></SpuList>
            <SpuForm v-if="showStatus == SPUSTATUS.SPUFORM" v-model="showStatus"  :spuInfo="spuInfo" @spuInfo="changeSpuInfo"></SpuForm>
            <SkuForm v-if="showStatus == SPUSTATUS.SKUFORM" v-model="showStatus" :spuInfo="spuInfo" @spuInfo="changeSpuInfo"></SkuForm>
        </el-card>
    </div>
</template>
<script lang="ts">
export enum SPUSTATUS {
  SPULIST = 1,
  SPUFORM = 2,
  SKUFORM = 3,
}
</script>
<script setup lang="ts">
import SpuForm from "@/views/product/spu/components/spuForm/index.vue"
import SpuList from "@/views/product/spu/components/spuList/index.vue"
import SkuForm from "@/views/product/spu/components/skuForm/index.vue"
import { ref } from "vue";
import type { SpuModel } from '@/api/spu';
const initSpuInfo = (): SpuModel => ({
  spuName: '',
  description: '',
  category3Id: undefined,
  tmId: undefined, 
  spuSaleAttrList: [],
  spuImageList: [] 
})
const spuInfo = ref<SpuModel>( initSpuInfo() )
const changeSpuInfo = (row: SpuModel) => {
  if(row){
    spuInfo.value = row;
  }else{
    spuInfo.value=initSpuInfo();
  }
}

const showStatus = ref(SPUSTATUS.SPULIST)
</script>

<style scoped>
</style>